{% extends 'layout.html'%}

{% block content %}
<body style="background: #fff">
<header class="main-header flex-wrap">
    <a href="" class="search left">
        <img src="./img/search_icon.png" width="17" height="17" alt="">
    </a>
    <div class="flex-1">夺宝奇兵</div>
    <a href="userInfo" class="info-btn right">
        <img src="./img/info_icon.png" width="17" height="17" alt="">
    </a>
</header>
<section class="swiper-container" style="height: 150px">
    <section class="swiper-wrapper">
        <a href="" class="swiper-slide">
            <img src="./img/demo/f04da22dd51e110d929e38.jpg" width="100%" height="100%" alt="">
        </a>
        <a href="" class="swiper-slide">
            <img src="./img/demo/2657968205079899331.jpg" width="100%" height="100%" alt="">
        </a>
    </section>
</section>

<section class="flex-wrap cate-block text-center">
    <a href="category" class="flex-1">
        <img src="./img/cate-1.png" alt="" width="39">
        <p class="cate-desc">商品分类</p>
    </a>
    <a href="" class="flex-1">
        <img src="./img/cate-2.png" alt="" width="39">
        <p class="cate-desc">中奖晒单</p>
    </a>
    <a href="" class="flex-1">
        <img src="./img/cate-3.png" alt="" width="39">
        <p class="cate-desc">夺宝清单</p>
    </a>
    <a href="" class="flex-1">
        <img src="./img/cate-4.png" alt="" width="39">
        <p class="cate-desc">常见问题</p>
    </a>
</section>

<section class="placard-wrap flex-wrap">
    <img class="placard-icon " src="./img/placard.png" alt="" width="16" height="14">
    <div class="placard-content ellipsis">
        恭喜 <span class="hilight">张**</span>（135****8114)在2小时前获得 <span class="hilight">iphone 6S（16G)</span>一台
    </div>
</section>

<section class="swi-tab-wrap flex-wrap text-center">
    <a href="javascript:void(0)" class="flex-1 swi-tab curr">最新夺宝</a>
    <a href="javascript:void(0)" class="flex-1 swi-tab">高价商品</a>
    <a href="javascript:void(0)" class="flex-1 swi-tab">秒杀商品</a>
    <a href="javascript:void(0)" class="flex-1 swi-tab">即将揭晓</a>
</section>
<section class="swi-item-wrap">
    <ul class="swi-item clearfix" showtype="1" page="1"pagesize="10">
        {% for item in item1%}
        <li class=" goods-item">
            <a href="productDetail?id={{item.Id}}">
                <img src="{{uri}}{{item.IndexPicture}}" alt=""  height="105" style="display: block;margin: 0 auto;max-width:100%">
                <div class="goods-name">
                    {{item.ProductName}} {{item.ProductSubName}}1
                </div>
            </a>
            <div class="progress-desc">参与进度 <span class="hilight">{{ item.process }}%</span></div>
            <div class="progress-wrap">
                <div class="progress" style="width: {{ item.process }}%"></div>
            </div>
            <div class="handle-btns flex-wrap">
                <a href="listConfirm?type=1&id={{item.Id}}" class="flex-1 handle-btn" style="margin: 0;">立即购买</a>
                <!--<a href="" class="flex-1 handle-btn">加入清单</a>-->
            </div>
        </li>
       {% endfor%}
    </ul>
    <ul class="swi-item clearfix hide" showtype="2" page="1" pagesize="10">
        {% for item in item2%}
        <li class=" goods-item">
            <a href="productDetail?id={{item.Id}}">
                <img src="{{uri}}{{item.IndexPicture}}" alt="" height="105" style="display: block;margin: 0 auto;max-width:100%">
                <div class="goods-name">
                    {{item.ProductName}} {{item.ProductSubName}}2
                </div>
            </a>
            <div class="progress-desc">参与进度 <span class="hilight">{{ item.process }}%</span></div>
            <div class="progress-wrap">
                <div class="progress" style="width: {{ item.process }}%"></div>
            </div>
            <div class="handle-btns flex-wrap">
                <a href="listConfirm?type=1&id={{item.Id}}" class="flex-1 handle-btn" style="margin: 0;">立即购买</a>
                <!--<a href="" class="flex-1 handle-btn">加入清单</a>-->
            </div>
        </li>
        {% endfor%}

    </ul>
    <ul class="swi-item clearfix hide" showtype="3" page="1" pagesize="10">
        {% for item in item3%}
        <li class=" goods-item">
            <a href="productDetail?id={{item.Id}}">
                <img src="{{uri}}{{item.IndexPicture}}" alt=""  height="105" style="display: block;margin: 0 auto;max-width:100%">
                <div class="goods-name">
                    {{item.ProductName}} {{item.ProductSubName}}3
                </div>
            </a>
            <div class="progress-desc">参与进度 <span class="hilight">{{ item.process }}%</span></div>
            <div class="progress-wrap">
                <div class="progress" style="width: {{ item.process }}%"></div>
            </div>
            <div class="handle-btns flex-wrap">
                <a href="listConfirm?type=1&id={{item.Id}}" class="flex-1 handle-btn" style="margin: 0;">立即购买</a>
                <!--<a href="" class="flex-1 handle-btn">加入清单</a>-->
            </div>
        </li>
        {% endfor%}
    </ul>
    <ul class="swi-item clearfix hide" showtype="4" page="1" pagesize="10">
        {% for item in item4%}
        <li class=" goods-item">
            <a href="productDetail?id={{item.Id}}">
                <img src="{{uri}}{{item.IndexPicture}}" alt=""  height="105" style="display: block;margin: 0 auto;max-width:100%">
                <div class="goods-name">
                    {{item.ProductName}} {{item.ProductSubName}} 4
                </div>
            </a>
            <div class="progress-desc">参与进度 <span class="hilight">{{ item.process }}%</span></div>
            <div class="progress-wrap">
                <div class="progress" style="width: {{ item.process }}%"></div>
            </div>
            <div class="handle-btns flex-wrap">
                <a href="listConfirm?type=1&id={{item.Id}}" class="flex-1 handle-btn" style="margin: 0;">立即购买</a>
                <!--<a href="" class="flex-1 handle-btn">加入清单</a>-->
            </div>
        </li>
        {% endfor%}
    </ul>

</section>

{% include 'script.html'%}
<script src="Swiper/dist/js/swiper.jquery.min.js"></script>
<script src="./js/modules/home/index.js"></script>
</body>
{% endblock %}
